<script>
import {clearCart, getCart, getCartItemCount, removeFromCart, updateCart, updateCartQuantity} from "@/utils/Cart";

export default {
  name: "Cart",
  data(){
    return{
      cartItems: [],
    }
  },
  created() {
    this.loadCart();
  },
  methods:{
    updateQuantity(productId, quantity){
      updateCartQuantity(productId, quantity);
      this.loadCart();
      this.$bus.$emit("cart-change");
    },
    loadCart: function () {
      const cart = getCart();
      this.cartItems = Object.values(cart);
      console.log(this.cartItems, getCartItemCount());
    },
    removeItem(id){
      this.$confirm("确认删除该商品？", "提示", {
        type: 'warning'
      }).then(()=>{
        removeFromCart(id);
        this.loadCart();
        this.$message.success("删除成功");
        this.$bus.$emit('cart-change');
      }).catch(err=>{})
    },
    clearCartF(){
      this.$confirm("确认清空购物车？", "提示", {
        type: 'warning'
      }).then(()=>{
        clearCart();
        this.loadCart();
        this.$message.success("购物车已清空");
        this.$bus.$emit('cart-change');
      }).catch(err=>{})
    }
  },
  computed: {
    totalItems(){
      return this.cartItems.reduce((total, item)=> total + item.quantity, 0);
    },
    totalPrice(){
      return this.cartItems.reduce((total, item)=> total + item.quantity * item.price, 0);
    },
  }
}
</script>

<template>
<div class="cart-bg">
  <el-card class="cart-card">
    <template #header>
      <div class="cart-header">
        <h2>我的购物车</h2>
      </div>
    </template>
    <div v-if="cartItems.length" class="cart-items">
      <el-card v-for="item in cartItems" :key="item.id" class="cart-item" shadow="hover">
        <div class="item-info">
          <img :src="item.imageUrl" alt="商品图片" class="item-img">
          <div class="item-details">
            <div>
              <div class="item-name">{{item.name}}</div>
              <div class="item-price">单价：{{item.price}}</div>
              <div class="item-total">
                总价：{{ (item.price * item.quantity).toFixed(2) }}
              </div>
            </div>

            <div style="min-width: 5rem; display: flex;flex-direction: column;align-items: end;justify-content: space-between">
              <div class="item-quantity">
  <!--      TODO:数据库查询商品数量        -->
                <p style="flex-shrink: 0">数量：</p>
                <el-input-number controls-position="right" style="flex: 1"
                    v-model="item.quantity" :min="1" :max="99" size="small" @change="updateQuantity(item.id, $event)"/>
              </div>
              <div class="item-actions">
                <el-button
                  type="danger"
                  size="small"
                  @click="removeItem(item.id)">
                  删除
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <div class="cart-summary">
        <div class="summary-info">
          <span>共 {{ totalItems }} 件商品</span>
          <span class="total-price">共 {{ totalPrice }} 元</span>
        </div>
        <div>
        <el-button type="danger" @click="clearCartF">清空购物车</el-button>
        <el-button type="primary" @click="cheakOut">
          结算
        </el-button>
        </div>
      </div>
    </div>
    <div v-else class="empty-cart">
      <i class="el-icon-shopping-cart-2"></i>
      <p>购物车是空的……</p>
      <el-button type="text" class="hover-underline" @click="$router.push('/product')"> 去购物 🚶‍♂️</el-button>
    </div>
  </el-card>
</div>
</template>

<style scoped lang="less">
.cart-bg {
  background: url("@/assets/bg/bg.png") center;
  background-size: cover;
  height: 100%;
  padding: 32px 1rem;
  overflow: auto;
}
.cart-card {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(64,158,255,0.08);
  padding: 12px 24px 0;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  //margin-bottom: 24px;
}

.cart-header h2 {
  color: #409EFF;
  margin: 0;
}
.empty-cart {
  text-align: center;
  padding: 60px 0;
}
.empty-cart i {
  font-size: 64px;
  color: #ddd;
  margin-bottom: 16px;
}
.empty-cart p {
  color: #999;
  margin-bottom: 24px;
}
.cart-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-item:hover {
  box-shadow: 0 2px 8px #409EFF !important; /* 悬浮时蓝色阴影 */
  transform: scale(1.01); /* 稍微放大 */
}
.cart-item {
  border-radius: 12px;
  overflow: hidden;
  //z-index: 1000;
  //border-radius: 12px;
  //overflow: hidden;
  transition: all 0.3s ease; /* 平滑过渡效果 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 默认阴影 */
}
.item-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #eee;
}
.item-details {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex: 1;
}
.item-name {
  font-weight: bold;
  margin-bottom: 4px;
}
.item-price {
  color: #ff4073;
  font-size: 1.1rem;
}
.item-quantity {
  width: 120px;
  display: flex;
  align-items: center;
  min-width: 10rem;
}
.item-total {
  font-weight: bold;
  color: #ff4073;
  font-size: 1.1rem;
  width: 100px;
  text-align: center;
}
.item-actions {
  width: 80px;
}
.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}
.summary-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.total-price {
  font-size: 1.2rem;
  font-weight: bold;
  color: #ff4073;
}
</style>